<!doctype html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <script src="//upcdn.b0.upaiyun.com/libs/jquery/jquery-2.0.3.min.js"></script>
    <meta name="charset" content="utf-8"/>
    <title>环境实时监测系统</title>
  </head>
  <body>

<style>
      html{height: 100%;}
      * { margin: 0; padding: 0; box-sizing: border-box; }
      body { font: 13px Helvetica, Arial;   height: 100%;}
      form { background: #000; padding: 3px; position: fixed; bottom: 0; width: 100%; }
      form input { border: 0; padding: 10px;  margin-right: .5%; }
      form button { width: 9%; background: rgb(130, 224, 255); border: none; padding: 10px; }
      #messages { list-style-type: none; margin: 0; padding: 0; overflow: scroll; height: 80% }
      #messages li { padding: 5px 10px; }
      #messages li:nth-child(odd) { background: #eee; }
      #u {width:10%;}
      #m {width: 80%;}
    </style>
  </head>
  <body>
      
  <audio controls style="display:none;">
    <source src="http://m1.music.126.net/Y8cTEL6RMtw6yXTwRKEG9A==/5740550208680052.mp3">
  </audio>
    <ul id="messages"></ul>
    <form action="">
      <input placeholder="用户名" id="u" /><input id="m" autocomplete="off" placeholder="消息主体"/><button>Send</button>
    </form>
    <script src="/socket.io/socket.io.js"></script>
<script>
  var socket = io();
  var audio = document.getElementsByTagName('audio')[0];
  $('form').submit(function(){
    if (!$('#m').val()=="") {
      socket.emit('newMsg',{name : $('#u').val() ? $('#u').val() : "阿卡林" ,content : $('#m').val()});
      $('#m').val('');
      return false;
    }else{
      return false;
    }
  });
  socket.on('newMsg', function(msg){
    $('#messages').append($('<li>').text(msg.name + " 说 ："+msg.content));
  });
  socket.on("PlaySignal",function(){
    $('#messages').append($('<li>').text("收到播放信号"));
    audio.play();
  });
  socket.on("PauseSignal",function(){
    $('#messages').append($('<li>').text("收到暂停信号"));
    audio.pause();
  });
  socket.on("ChangeSignal",function(query){
    $('#messages').append($('<li>').text("收到换歌信号"));
    audio.pause();
   audio.children[0].src=query.src;
    audio.play();
  });
</script>

  </body>
  
  <script src="http://blogcdn.izhai.net/mpop.js"></script> 
</html>